<template>
    <vol-box
:lazy="true"
v-model="model2"
title="机床详情"
:width="800"
:padding="5"
:onModelClose="onModelClose"
>

<h2 style="margin-left: 20px;">{{currentRow.unit}}号机床</h2>
<div style="display: flex;align-items: center;">
  <img  width="180" height="200" style="display:inline-block;text-align: left;margin: 10px;" :src="imgSrc" />
  <div style="display: flex;flex-direction: column;justify-content:space-around;height: 180px;align-items: flex-end;">
      <div class="machine_item">使用状态：</div>
      <div class="machine_item">报警信息： </div>
      <div class="machine_item">工单用时：</div>
      <div class="machine_item">机械坐标：</div>
  </div>
  <div style="display: flex;flex-direction: column;justify-content:space-around;height: 180px;">
    <div  class="machine_item"><span>{{cncMessage.useStatus}}</span></div>
    <div  class="machine_item"><span>{{ cncMessage.message }}</span></div>
    <div  class="machine_item"><span>{{ cncMessage.workTime }}</span></div>
    <div  class="machine_item">X:<span>  {{cncMessage.positionX }}</span>    Y:  <span> {{cncMessage.positionY }} </span>    Z: <span>{{cncMessage.positionZ }} </span> </div>
  </div>
</div>

<template #footer>
  <el-button type="default" size="small" @click="close"
    >关闭</el-button
  >
</template>
</vol-box>
</template>
  <script>
import VolBox from '@/components/basic/VolBox.vue';
import imgSrc from '@/assets/imgs/machine.png';
import http from '@/api/http.js';


import { ref, defineComponent, onUnmounted } from 'vue';
  export default defineComponent({
    components: {
      VolBox
    },
    setup(props, context) {
      const signalR = require("@microsoft/signalr");
      const url=http.ipAddress+"cncStatusHub";
      const Slr = new signalR.HubConnectionBuilder().withUrl(url).configureLogging(signalR.LogLevel.Error).build();
      
      Slr.on('CncMessage',data=>{
        console.log(data);
        if(data.unit==currentRow.value.unit)
          cncMessage.value=data;
      });

      const cncMessage=ref();
      cncMessage.value = {useStatus:'无',message:'无',workTime:'无',positionX:'0',positionY:'0',positionZ:'0'};

        const inputLocationValue = ref(0);
        const currentRow = ref();
      const model2 = ref(false);

      const open = (row) => {
        model2.value = true;
        currentRow.value=row;
        console.log(currentRow.value.unit);
        Slr.start();

      };
      const close = () => {
        model2.value = false;
        console.log('卸载');
        Slr.stop();
      };

      return {open,close,cncMessage,imgSrc,Slr,currentRow, inputLocationValue,model2 };
    },

  });
  </script>
  
<style scoped>
.machine_item{
  font-size: 18px;
  span{
    color: forestgreen;
  }
}
</style> 